<!doctype html>

<html>
  <head>
    <meta charset="utf-8" />
    <title>&lt;my-element> Demo</title>
    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <script src="../node_modules/lit/polyfill-support.js"></script>
    <script type="module" src="../my-element.js"></script>
    <script type="module" src="../src/ACAudio.js"></script>
    <style>
      p {
        border: solid 1px blue;
        padding: 8px;
      }

      @media (prefers-color-scheme: dark) {
        body {
          background-color: #333;
          color: #fff;
        }
      }
    </style>
  </head>
  <body>
    <my-element>
      <p>This is child content</p>
    </my-element>

    <ac-audio src="https://dict.youdao.com/dictvoice?le=jap&type=3&audio=%E3%81%94%E3%81%9C%E3%82%93%E3%81%A1%E3%82%85%E3%81%86"></ac-audio>
    <ac-audio>
      <a class="replay-button soundLink" href="#" onclick="console.log('clicked'); return false;">
        <svg class="playImage" viewBox="0 0 64 64" version="1.1">
            <circle cx="32" cy="32" r="29"></circle>
            <path d="M56.502,32.301l-37.502,20.101l0.329,-40.804l37.173,20.703Z"></path>
        </svg>
      </a>
    </ac-audio>
  </body>
</html>
